<template>
	<view>
		<nav-custom :name="title"></nav-custom>
		<view class="list">
			<view class="grey_f_24 bor_b_40 dis_f_c_c">2022-05-20</view>
			<view class="left dis_f bor_b_40">
				<image class="a_img mar_r_16" :src="url+'/logo.png'" mode=""></image>
				<view class="left_text bor_b_bot black_f_28">
					亲，这个商品就只剩一件了哦，喜欢的话可以立即下单哦。
				</view>
			</view>
			<view class="grey_f_24 bor_b_40 dis_f_c_c">刚刚</view>
			<view class="right bor_b_40">
				<view class="mar_r_16 right_text white_f_28">
					我再看看
				</view>
				<image class="a_img" :src="url+'/logo.png'" mode=""></image>
			</view>
			<view class="left dis_f bor_b_40">
				<image class="a_img mar_r_16" :src="url+'/logo.png'" mode=""></image>
				<view class="left_text bor_b_bot black_f_28">
					亲，这个商品就只剩一件了哦，喜欢的话可以立即下单哦。
				</view>
			</view>
		</view>
		<view class="bottom ">
			<view class="dis_f_sb_c">
				<view class="bo_input">
					<u--textarea v-model="value" border="none" @input="input" placeholder="请输入您的诉求~"
						autoHeight></u--textarea>
				</view>
				<view>
					<u-icon name="plus-circle" color="#333A47" size="26"></u-icon>
				</view>
				<view v-if="is_show" @click="dianji()">
					<u-icon name="plus-circle" color="#333A47" size="26"></u-icon>
				</view>
				<view v-if="!is_show" class="bo_but white_f_28">
					发送
				</view>
			</view>
			<view class="add" v-if="zk_show">
				<view class="add_a">
					<image class="add_a_img mar_b_8" :src="url+'/image/xiangce.png'" mode=""></image>
					<view class="grey_f_28">
						相册
					</view>
				</view>
				<view class="add_a">
					<image class="add_a_img mar_b_8" :src="url+'/image/paizhao.png'" mode=""></image>
					<view class="grey_f_28">
						拍照
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				title: "添加商品",
				value: '',
				is_show: true,
				zk_show:false,
				url:'',
			}
		},
		onShow() {
			this.url=this.$.ajax_url3
		},
		methods: {
			input(e) {
				console.log(e);
				if (e.length >= 1) {
					this.is_show = false
				} else if (e.length <= 1) {
					this.is_show = true
				}
			},
			dianji(){
				this.zk_show = !this.zk_show
			}
		}
	}
</script>

<style lang="scss">
	.list {
		padding: 0 32rpx;
		width: 686rpx;
	}

	.mar_40 {
		margin: 40rpx 0;
	}

	.a_img {
		width: 64rpx;
		height: 64rpx;
		border-radius: 100rpx;
	}

	.left_text {
		max-width: 542rpx;
		padding: 16rpx;
		border-radius: 8rpx 24rpx 24rpx 24rpx;
		background-color: #fff;
		box-shadow: 0rpx 4rpx 16rpx 0rpx rgba(51, 119, 255, 0.05);
	}

	.right_text {
		max-width: 542rpx;
		padding: 16rpx;
		border-radius: 24rpx 8rpx 24rpx 24rpx;
		background-color: #3377FF;
	}

	.right {
		display: flex;
		justify-content: flex-end;
	}

	.bottom {
		padding: 16rpx 32rpx;
		width: 686rpx;
		background-color: #fff;
		position: fixed;
		bottom: 0;
		left: 0;
		padding-bottom: 40rpx;
	}

	.bo_input {
		width: 454rpx;
		background: #F7F7F7;
		padding: 16rpx 24rpx;
		border-radius: 8rpx 8rpx 8rpx 8rpx;
	}

	.bo_but {
		width: 100rpx;
		height: 60rpx;
		background: #3377FF;
		border-radius: 8rpx 8rpx 8rpx 8rpx;
		text-align: center;
		line-height: 60rpx;
	}

	.add {
		display: flex;
		margin-top: 30rpx;
		height: 200rpx;
	}

	.add_a {
		display: flex;
		flex-direction: column;
		align-items: center;
		margin-right: 40rpx;
	}

	.add_a_img {
		width: 100rpx;
		height: 100rpx;
	}
</style>